import { Component } from 'react';
import PropType from 'prop-types';
import './Listcom.scss';
// todulist子组件
class ListCom extends Component {
  static propTypes = {
    listArr: PropType.array.isRequired,
    onDelete: PropType.func,
    onClear: PropType.func,
  };
  state = {};
  render() {
    const { listArr, onDelete, onClear } = this.props;
    return (
      <div className="to-content">
        <div className="list">
          {listArr.length ? (
            listArr.map((item, index) => (
              <div className="item" key={index}>
                <div>{index + 1}</div>
                <div className="centerx">{item}</div>
                <div onClick={() => onDelete(index)}>x</div>
              </div>
            ))
          ) : (
            <h1>空空如也~</h1>
          )}
        </div>
        {/* 总数删除 */}
        <div className="footer">
          <span>总数：{listArr.length}</span>
          <span onClick={() => onClear()}>清除</span>
        </div>
      </div>
    );
  }
}

export default ListCom;
